import React, { useState, useEffect } from 'react'
import { Layout, Menu, notification } from 'antd';
import Mycenter from './Mycenter';
import Address from './Address';
import Order from '../order/Order';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
    Link,
    useNavigate,
} from "react-router-dom";
export default function Userinfo() {
    const { Content, Sider } = Layout;
    const [isKey,setIsKey] = useState('4')
    const handleClick = e => {
        setIsKey(e.key)
    };
    const navigate = useNavigate();
    useEffect(()=>{
        if(sessionStorage.getItem('token')==null){
            notification['error']({
                message: '未验证的用户',
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
            navigate('/login');
        }
    },[isKey])
    return (
        <div className='wrapper'>
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={broken => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                    style={{ margin: '20px 10px' }}
                >
                    <div className="photo">
                        <img src="/img/1.png" alt="" />
                        <h1><strong>用户名</strong><span>退出登录</span></h1>
                    </div>
                    <Menu
                        onClick={handleClick}
                        style={{ width: 255, height: '90%' }}
                        selectedKeys={isKey}
                        mode="inline"
                        className='menu'
                    >
                        <h1 style={{ margin: '15px 15px' }}><strong>我的交易</strong></h1>
                        <Menu.Item key="2"><Link to="/shoppingCar">我的购物车</Link></Menu.Item>
                        <Menu.Item key="3"><Link to="/userinfo/order">我的订单</Link></Menu.Item>
                        <h1 style={{ margin: '15px 15px' }}><strong>个人中心</strong></h1>
                        <Menu.Item key="4"><Link to="/userinfo">我的中心</Link></Menu.Item>
                        <Menu.Item key="5"><Link to="/userinfo/address">地址管理</Link></Menu.Item>
                        <h1 style={{ margin: '15px 15px' }}><strong>账户管理</strong></h1>
                        <Menu.Item key="6">个人信息</Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Content style={{ margin: '0px 70px' }}>
                        <Routes>
                            <Route path="/" element={<Mycenter />} />
                            <Route path="/address" element={<Address />} />
                            <Route path="/order" element={<Order />} />
                        </Routes>
                    </Content>
                </Layout>
            </Layout>
        </div >
    )
}
